<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/laydate/laydate.js"></script>
<style type="text/css">
   .main{
      width: 60%;
      margin-left: 10%;
   }
</style>
</head>
<body>
  <div class="main">
     <div>
       <h2>新增部门</h2>
       <div>
       <form action="../add_Section" method="post" id="form">
          <table class="table table-bordered">
            <tr>
              <td>部门名称</td>
              <td><input type="text" name = "deptname"></td>
            </tr>
            <tr>
              <td>部门id</td>
              <td><input type="text" name = "seorid"></td>
            </tr>
            <tr>
               <td>部门负责人</td>
               <td><input type="text" name="seprinid" id="leaderName"><span id="adds1">添加负责人</span></td>
            </tr>
            <tr>
               <td>联系方式</td>
               <td><input type="text" name="landphone"></td>
            </tr>
          </table>
           <button type="submit" class="btn btn-primary" id="submit_form">确定</button>
          </form>
       </div>
     </div>
     
     <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"> 添加负责人</div>
                <div class="modal-body" id="s7">
                	<!-- <ul>
                	  <li v-for="user in userList"><input name="checkbox" type="checkbox" value="{{user.username}}" />{{user.uname}}</li>
                	</ul> -->
                	<table class="table table-hover">
							<thead>
					        	<tr class="info"><th>显示部门名称</th><th>显示员工名称</th></tr>
					        </thead>
					        <tbody id="tb">
					        	<tr>
					        	  <td id="tb1" class='error'>
					        	    <select id="deptno">
					        	      <option value="">请选择部门</option>
					        	      <option v-for="dept in deptList" value="{{dept.seorid}}">{{dept.seabout}}</option>
					        	    </select>
					        	  </td>
					        	  <td id="tb2">
					        	     <ul>
					        	       <li v-for="name in nameList" >
					        	         <input name="Fruit" type="radio" value="{{name.username}}" />{{name.uname}}
					        	       </li>
					        	     </ul>
					        	  </td>
					        	</tr>			
					        </tbody>
					        							
				   </table>		     
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal" id="sure">确定</button>
                </div>
            </div>
        </div>
    </div>
     
  </div>
  
 <script type="text/javascript">
   $(function(){
	   $("#adds1").click(function () {
      	 $("#add").modal("show");
      	 vue.getName();
      })
      
       var vue = new Vue({
        	el:"#s7", 
        	data:{deptList:"",nameList:""},
        	methods:{
        		getName : function(){
        			var _self = this;
        			$.ajax({
        				url:'../getIdandName',
        				type:'post',
        				dataType:'json',
        				success : function(result){
        					console.log(result);
        					_self.deptList = result;
        				}
        			})
        		},
        	   getUname : function(deptno){
        		   console.log(deptno);
        		   $.ajax({
        			   url:'../getListUser2',
        			   type:'post',
        			   data:{'deptno':deptno},
        			   dataType:'json',
        			   success : function(result){
        				   console.log(result);
        				   vue.nameList = result;
        			   }
        		   })
        	   }
        	}
        })
	   
	   $(document).on("change", "#deptno", function(){
       	var deptno = $("#deptno").val();
       	if(deptno==""){
       		return;
       	}
       	vue.getUname(deptno);
       })
     $("#sure").click(function(){
    	var t1 = $('input:radio:checked').val();
    	$("#leaderName").val(t1);
     })
     
     $("#submit_form").click(function(){
    	 $("#form").submit();
     })
     
       
   })
   
   
   
 </script>
  
</body>
</html>